import {useState} from "react";

import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Card from '@mui/material/Card';
import Stack from '@mui/material/Stack';
import Alert from '@mui/material/Alert';
import Dialog from "@mui/material/Dialog";
import Typography from '@mui/material/Typography';

import { useRouter } from 'src/routes/hooks';

import {Label} from 'src/components/label';
import {ColorPreview} from 'src/components/color-utils';



// ----------------------------------------------------------------------

export type ProductItemProps = {
    id: string;
    name: string;
    status: string;
    coverUrl: string;
    colors: string[];
    type: string | null;
};

export function ProductItem({product}: { product: ProductItemProps }) {
    const [openDialog, setOpenDialog] = useState(false);
    const router = useRouter();

    const handleClick = () => {
        if (product.status === 'uninstalled') {
            router.push(`/product/install/${product.id}`);  // 保持与路由配置一致
        } else {
            setOpenDialog(true);
        }
    };


    const renderStatus = (
        <Label
            variant="inverted"
            color={(product.status === 'uninstalled' && 'error') || 'info'}
            sx={{
                zIndex: 9,
                top: 16,
                right: 16,
                position: 'absolute',
                textTransform: 'uppercase',
            }}
        >
            {product.status}
        </Label>
    );

    const renderImg = (
        <Box
            component="img"
            alt={product.name}
            src={product.coverUrl}
            sx={{
                top: 0,
                width: 1,
                height: 1,
                objectFit: 'cover',
                position: 'absolute',
            }}
        />
    );
    /**
     * 项目类型展示
     * <p> biz 商业项目
     * <p> env 环境项目
     */
    const projectType = (
        <Typography variant="subtitle1">
            {product.type === "biz" ? product.type :
                <Typography
                    component="span"
                    variant="body1"
                    sx={{
                        color: 'text.disabled',
                    }}
                >
                    {product.type}
                </Typography>}
        </Typography>
    );

    return (
        <Card>
            <Box
                sx={{pt: '100%', position: 'relative'}}
                onClick={handleClick}
            >
                {product.status && renderStatus}
                {renderImg}
            </Box>

            <Stack spacing={2} sx={{p: 3}}>
                <Link color="inherit"
                      underline="hover"
                      variant="subtitle2"
                      noWrap
                      onClick={handleClick}
                >
                    {product.name}
                </Link>

                <Box
                    sx={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                    }}
                >
                    <ColorPreview colors={product.colors}/>
                    {projectType}
                </Box>
            </Stack>

            <Dialog
                open={openDialog}
                onClose={() => setOpenDialog(false)}
                maxWidth="xs"
                fullWidth
            >
                <Alert
                    severity="info"
                    onClose={() => setOpenDialog(false)}
                    sx={{
                        p: 3,
                        alignItems: 'center',
                        '& .MuiAlert-message': {
                            width: '100%',
                            textAlign: 'center',
                            fontSize: '1rem'
                        }
                    }}
                >
                    项目已经安装，请勿重复安装！
                </Alert>
            </Dialog>
        </Card>
    );
}
